<template>
    <div class="t2">
        <div style="padding: 10px" class="home-content">
            <el-form :inline="true" :model="params" class="demo_network">
                <el-select v-model="params.net" placeholder="选择网络">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="params.passageway" placeholder="选择通道">
                    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-select v-model="params.organization" placeholder="选择组织" style="margin-right:20px">
                    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form>
            <el-button type="primary" @click="selectTable">查询</el-button>
        </div>
        <div class="mid">
            <div class="content_mid">
                <el-date-picker v-model="value1" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                    :default-time="['12:00:00']">
                </el-date-picker>
            </div>
            <el-form :inline="true" :model="params" class="form_que">
                <el-select v-model="params.net" placeholder="区块索引">
                    <el-option v-for="item in optionque" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form>
            <el-input v-model="input" placeholder="请输入内容" style="width:200px;margin-right: 20px;"></el-input>
            <el-button type="primary" @click="resetForm('formInline')">重置</el-button>
        </div>
        <div class="footer">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="id" label="区块编号">
                    <template>
<el-input v-if="scope.">

                    </el-input>
                    </template>

                </el-table-column>
                <el-table-column prop="date" label="时间戳" width="200">
                </el-table-column>
                <el-table-column prop="payNumber" label="交易数量" width="200">
                </el-table-column>
                <el-table-column prop="blockHash" label="区块哈希">
                </el-table-column>
                <el-table-column prop="dataHash" label="数据哈希">
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script>
export default {
    name: 't2',
    data() {
        return {
            input: '',
            value1: '',
            params: {},
            options: [
                {
                    value: '选项1',
                    label: '网络1',
                },
                {
                    value: '选项2',
                    label: '网络2',
                },
                {
                    value: '选项3',
                    label: '网络3',
                },
                {
                    value: '选项4',
                    label: '网络4',
                },
                {
                    value: '选项5',
                    label: '网络5',
                },
            ],
            options2: [
                {
                    value: '通道1',
                    label: '通道1',
                },
                {
                    value: '通道2',
                    label: '通道2',
                },
                {
                    value: '通道3',
                    label: '通道3',
                },
                {
                    value: '通道4',
                    label: '通道4',
                },
                {
                    value: '通道5',
                    label: '通道5',
                },
            ],
            options3: [
                {
                    value: '选项1',
                    label: '组织1',
                },
                {
                    value: '选项2',
                    label: '组织2',
                },
                {
                    value: '选项3',
                    label: '组织3',
                },
                {
                    value: '选项4',
                    label: '组织4',
                },
                {
                    value: '选项5',
                    label: '组织5',
                },
            ],
            optionque: [
                {
                    value: '区块编号',
                    label: '区块编号',
                },
                {
                    value: '区块哈希',
                    label: '区块哈希',
                },
                {
                    value: '数据哈希',
                    label: '数据哈希',
                },
            ],
            tableData: [{
                date: '2016-05-02',
                id: '001',
                payNumber: '20',
                blockHash: '1123',
                dataHash: '29389',
            }, {
                date: '2016-05-04',
                id: '001',
                payNumber: '21',
                blockHash: '1123',
                dataHash: '29389',
            }, {
                date: '2016-05-01',
                id: '001',
                payNumber: '2',
                blockHash: '1123',
                dataHash: '29389',
            }, {
                date: '2016-05-03',
                id: '001',
                payNumber: '5',
                blockHash: '1123',
                dataHash: '29389',
            }],
        }
    },
}
</script>

<style scoped>
.t2 {
    background-color: white;
}

.form_que {
    margin: 0 20px 0 20px;
}

.home-content {
    display: flex;

}

.content_mid {
    margin-left: 10px;
}

.footer {
    margin-left: 10px;
    margin-top: 20px;
    margin-right: 10px;

}

.mid {
    display: flex;
}

.demo_network {
    /* margin-right: 20px; */
    display: flex;
    justify-content: space-between;
    width: 812px;
}
</style>